<template>
  <div class="cart">
    <orderHeader title="我的购物车">
      <template #tishi>
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </template>
    </orderHeader>
    <div class="box">
      <div class="container">
        <div class="shopcar-top">
          <el-row :gutter="10">
            <el-col :span="2">
              <div class="allChekced"><span :class="{'checked-all':shopCatList.selctedAll}" @click="changeAllChecked"></span>全选</div>
            </el-col>
            <el-col :span="2">
              <div class="kong"></div>
            </el-col>
            <el-col :span="8">
              <div class="prodcut-name">
                <p>商品名称</p>
              </div>
            </el-col>
            <el-col :span="3">
              <div>单价</div>
            </el-col>
            <el-col :span="3">
              <div>数量</div>
            </el-col>
            <el-col :span="3">
              <div>小计
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                操作</div>
            </el-col>
          </el-row>
        </div>
        <div class="shop-box">
          <div class="shopcarList" v-for="(item,index) in shopCatList.list" :key="item.id">
            <el-row :gutter="10">
              <el-col :span="2">
                <div class="checked">
                  <span :class="{'checked':item.selcted}" @click="changeChecked(item)"></span>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="img">
                  <img :src="item.imgUrl" alt="">
                </div>
              </el-col>
              <el-col :span="8">
                <div class="prodcut-name">
                  <p>{{item.title}}</p>
                </div>
              </el-col>
              <el-col :span="3">
                <div>{{item.price}}￥</div>
              </el-col>
              <el-col :span="3">
                <div class="num">
                  <a href="javascript:;" @click="addOrSub(item.id,'sub')">-</a>
                  <input type="text" :value="item.num" @blur="changeValue($event,item)">
                  <a href="javascript:;" @click="addOrSub(item.id,'add')">+</a>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  {{item.num * item.price}}￥
                </div>
              </el-col>
              <el-col :span="3">
                <span @click="removeProduct(index)" class="close">
                  X</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="shop-end">
          <div class="left">
            <router-link to="/">继续购物</router-link>
            <span> 已选择 <i>{{isSelect.length}}</i> 类商品 共 <i>{{productSelectList}}</i> 件</span>
          </div>
          <div class="right">
            <span>合计<i>{{priceSum}}</i>元</span>
            <a @click="goBuy">去结算</a>
          </div>
        </div>
      </div>
    </div>
    <Introduce></Introduce>
    <Footer></Footer>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      isAllChecked: true
    }
  },
  mounted() {
    this.getShopCarList()
  },
  methods: {
    getShopCarList() {
      this.$store.dispatch('getShopCat')
    },
    // 修改全选状态
    changeAllChecked() {
      const flag = !this.shopCatList.selctedAll
      this.$store.commit('CHANGEALLCHECKED', flag)
    },
    // 修改单选状态
    changeChecked(arr) {
      const flag = !arr.selcted
      this.$store.commit('CHANGECHECKED', { flag, id: arr.id })
      console.log(1)
    },
    // 添加商品数量
    addOrSub(id, status) {
      this.$store.commit('ADDORSUB', { id, status })
    },
    changeValue(e, item) {
      const value = e.target.value.trim()
      const zzbds = /^[1-9]d*$/
      const flag = zzbds.test(value)
      if (flag) {
        this.$store.commit('BLURCHANGENUM', { id: item.id, value })
      } else {
        alert('请输入1~10之间的整数')
        e.target.value = item.num
      }
    },
    // 删除某一个商品
    removeProduct(index) {
      this.$store.commit('REMOVEPRODCUT', index)
    },
    // 结算购物车
    goBuy() {
      if (this.isSelect.length === 0) {
        alert('至少选择一件商品')
      } else {
        this.$router.push('/orderConfirm')
      }
    }
  },
  computed: {
    ...mapState(['shopCatList']),
    ...mapGetters(['isSelect']),
    priceSum() {
      return this.isSelect.reduce((sum, item) => {
        sum += item.num * item.price
        return sum
      }, 0)
    },
    productSelectList() {
      return this.isSelect.reduce((sum, item) => {
        sum += item.num
        return sum
      }, 0)
    }
  }
}
</script>

<style lang='scss' scoped>
.cart {
  .box {
    width: 100%;
    background-color: #f5f5f5;
    padding: 30px 0 60px;
    .shopcar-top {
      height: 70px;
      line-height: 70px;
      background-color: #fff;
      font-size: 16px;
      border-bottom: 1px solid #f5f5f5;
      text-align: center;
      .allChekced {
        span {
          display: inline-block;
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 8px;
          border: 1px solid #999797;
          &.checked-all {
            background: url('../../../public/imgs/icon-gou.png') no-repeat center;
            background-size: contain;
            background-color: #ff6700;
            border: 1px solid #fff;
          }
        }
      }
      .kong {
        width: 100%;
        height: 70px;
      }
      .prodcut-name {
        text-align: left;
      }
    }
    .shopcarList {
      height: 85px;
      padding: 15px 0;
      background-color: #fff;
      line-height: 85px;
      text-align: center;
      font-size: 16px;
      .img {
        height: 80px;
        img {
          width: 80px;
          height: 80px;
        }
      }
      .checked {
        span {
          display: inline-block;
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 8px;
          border: 1px solid #999797;
          &.checked {
            background: url('../../../public/imgs/icon-gou.png') no-repeat center;
            background-size: contain;
            background-color: #ff6700;
            border: 1px solid #fff;
          }
        }
      }
      .prodcut-name {
        text-align: left;
      }
      .num {
        display: flex;
        align-items: center;
        height: 85px;
        line-height: 85px;
        a {
          display: inline-block;
          width: 38px;
          height: 38px;
          border: 1px solid #ccc;
          line-height: 38px;
          color: rgb(155, 153, 153);
          font-size: 20px;
          &:first-child {
            border-right: 0;
          }
          &:last-child {
            border-left: 0;
          }
        }
        input {
          width: 40px;
          height: 38px;
          line-height: 38px;
          border: 0;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          text-align: center;
        }
      }
      .close {
        cursor: pointer;
      }
    }

    .shop-end {
      height: 50px;
      width: 100%;
      line-height: 50px;
      text-align: center;
      background-color: #fff;
      margin-top: 30px;
      font-size: 18px;

      .left {
        float: left;
        width: 300px;
        height: 50px;
        font-size: 14px;
        a {
          color: #999797;
          transition: all 0.3s;
          padding-right: 15px;
          border-right: 1px solid #b8b7b7;
          &:hover {
            color: #ff6700;
          }
        }
        span {
          padding-left: 15px;
          i {
            color: #ff6700;
          }
        }
      }
      .right {
        float: right;
        a {
          display: inline-block;
          width: 200px;
          background: #ff6700;
          color: #fff;
          margin-left: 35px;
          cursor: pointer;
          &:hover {
            background: #ea6105;
          }
        }
        span {
          color: #ff6700;
          font-size: 16px;
          i {
            font-size: 26px;
            padding: 0 8px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
